{% extends "base.html" %}

{% block title %} Bayanihan: Home {% endblock %}

{% block nav-home %} class="nav-active" {% endblock %} 

{% block css %}
	<link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}css/home.css" />
{% endblock %}
		
{% block js %}
	<script type="text/javascript" src="{{MEDIA_URL}}js/OpenLayers.js"></script>
	<script type="text/javascript" src="{{MEDIA_URL}}js/map.js"></script> 
	<script type="text/javascript" src="{{MEDIA_URL}}js/jquery.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
	
	{% block map_operations %}
		<script type="text/javascript">
			$(document).ready( function(){
				init(); 
                {% for deployment, collection in reports.items %}
                    {% if collection %}
                        data = jQuery.parseJSON('{{collection|safe}}');
                        addLayer('{{deployment}}');
                        get_reports(data, '{{deployment}}');
                     {% endif %}
                {% endfor %}
                
                $('input').click(function(){
                    var layerName = $(this).val();
                    var isChecked = $(this).attr('checked');
                    
                    if(isChecked)
                        
                        vectorLayer[layerName].setVisibility(true);
                    else
                        vectorLayer[layerName].setVisibility(false);
				});
            });
		</script>
	{% endblock %}
{% endblock %}
			
{% block content %}
	<div id="map"></div>
	<div id="sidebar">
        <div>
            {% for parent, children in deployments.items %}
                <h3>{{ parent }}</h3>
                <div class="child_list">
                {% for child in children %}
                    <li> 
                        <label for="{{child}}"><input type="checkbox" value="{{child}}" id="{{child}}" CHECKED></input><h3>{{child}}</h3></label>
                    </li>
                {% endfor %}
                </div>
            {% endfor %}
        </div>
        <div id="report_info">
        </div>
    </div>
    <div style="clear:left"></div>
    
    <div id="reportBoard"></div>
    
{% endblock %}

